<template>
    <div class="goodsList">
         <!-- 面包屑导航 -->
    <div class="Breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="javascript:;">商品管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 添加按钮 -->
    <div>
        <el-button type="primary" plain @click='addCateClick'>添加分类</el-button>
    </div>
    <!-- 分支数插件 -->
    <div>
    <tree-grid
      :treeStructure="true"
      :columns="columns"
      :data-source="dataSource"
      @deleteCate="deleteCategory"
      @editCate="editCategory"
    >
    </tree-grid>
    </div>
    <!-- 分页 -->
     <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size=10
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
     <!-- 添加分类弹框 -->
    <div>
        <el-dialog title="添加分类" :visible.sync="addFormVisible" width=40% >
            <el-form :model="addform" :rules="addrules" ref='addRef'>
                <el-form-item label="分类名称" label-width=80px prop="name">
                <el-input v-model="addform.name" autocomplete="off"></el-input>
                </el-form-item>
                 <el-form-item label="父类名称" label-width=80px>
                     <!-- props属性用于配置字段名
                     change-on-select属于作用为只选择其中一级 -->
                    <div class="block">
                      <el-cascader
                        change-on-select
                        :props="propsList"
                        :options="options"
                        v-model="selectedOptions"
                        @change="handleChange">
                      </el-cascader>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAddUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    </div>
</template>

<script>
// 引入插件 getCategories用于获取商品分类数据
import { getCategories, getCategoriesSelect } from '@/api/index'
// 1.引用分指数插件
import TreeGrid from '@/components/TreeGrid/TreeGrid'
// 2.注入组件
export default {
  components: {
    TreeGrid
  },
  data () {
    return {
      dataSource: [], // 用于几首商品列表分类数据
      columns: [{
        text: '分类名称',
        dataIndex: 'cat_name',
        width: ''
      }, {
        text: '是否有效',
        dataIndex: 'cat_deleted',
        width: ''
      }, {
        text: '排序',
        dataIndex: 'cat_level',
        width: ''
      }],
      total: 0, // 总用户数量,默认为0
      pagesize: 10, // 每页显示的条数，默认10条
      pagenum: 1, // 当前页码
      currentPage: 1, // 默认展示第一页
      addFormVisible: false, // 添加分类弹窗显示/隐藏
      addform: { name: '' }, // 添加分类弹窗获取数据
      addrules: {
        name: [{ required: true, message: '请输入分类名', trigger: 'blur' }]
      },
      options: [],
      selectedOptions: [],
      propsList: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      }
    }
  },
  created () {
    this.initcategories()
  },
  methods: {
    initcategories () {
      getCategories({ query: '', pagenum: this.pagenum, pagesize: this.pagesize })
        .then(res => {
        //   console.log(res.data.data)
          this.dataSource = res.data.data.result
          this.total = res.data.data.total
        })
    },
    deleteCategory (cid) {
    //   console.log(cid)
    },
    editCategory (cid) {
    //   console.log(cid)
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val // 修改每页显示多少条数据显示，并刷新表格数据
      this.initcategories()
    },
    handleCurrentChange (val) {
    //   console.log(`当前页: ${val}`)
      this.pagenum = val // 每当切换页面时，刷新表格数据
      this.initcategories()
    },
    // 添加分类功能按钮
    addCateClick () {
      // 显示弹窗
      this.addFormVisible = true
      //  使用getCategoriesSelect并传输参数2，代表显示两层
      getCategoriesSelect(2)
        .then(res => {
        //   console.log(res)
        // 将获取到的值赋值给options
          this.options = res.data.data
        })
    },
    handleChange (value) {
      // console.log(value);
    },
    confirmAddUser () {

    }
  }
}
</script>

<style lang="scss" scoped>
.goodsList {
    .Breadcrumb {
    padding: 15px 10px;
    background-color: #f5f5f5;
    margin-bottom: 10px;
  }
  .pagination {
      padding: 5px 5px;
      background-color: #F5F5F5;
  }
}
</style>
